<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <div class="main-panel">
            <div class="panel">
              <div class="title">基础信息</div>
              <div class="content">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="跟进内容" prop="bz">
                      <el-input v-model.trim="form.bz" clearable placeholder="请输入内容"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="重要客户" prop="vip">
                      <el-switch
                        v-model="form.vip"
                        active-value="1"
                        inactive-value="0"
                        active-text="是"
                        inactive-text="否"
                        @change="handleVipChange(form.id, form.vip)"
                      ></el-switch>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="姓名" prop="name">
                      <el-input v-model="form.name" placeholder="请输入姓名"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="客户电话" prop="tel">
                      <el-input v-model="form.tel" class="custerMobile" maxlength="11" placeholder="请输入客户电话"
                                disabled/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="星级" prop="level">
                      <el-select v-model="form.level" placeholder="请选择星级">
                        <el-option
                          v-for="dict in dict.type.level_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="客户状态" prop="customerStatus">
                      <el-select v-model="form.customerStatus" placeholder="请选择客户的状态">
                        <el-option
                          v-for="dict in dict.type.customer_status"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="贷款类型" prop="loanType">
                      <el-select v-model="form.loanType" placeholder="请选择贷款类型">
                        <el-option
                          v-for="dict in dict.type.loan_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="panel">
              <div class="title">扩展信息</div>
              <div class="content">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="年龄" prop="age">
                      <el-input v-model="form.age" placeholder="请输入年龄"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="性别" prop="sex">
                      <el-select v-model="form.sex" placeholder="请选择性别">
                        <el-option
                          v-for="dict in dict.type.sex_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="学历 " prop="education">
                      <el-input v-model="form.education" placeholder="请输入学历 "/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="是否有房" prop="house">
                      <el-select v-model="form.house" placeholder="请选择是否有房">
                        <el-option
                          v-for="dict in dict.type.house_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="是否有车" prop="car">
                      <el-select v-model="form.car" placeholder="请选择是否有车">
                        <el-option
                          v-for="dict in dict.type.car_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="保单" prop="warranty">
                      <el-select v-model="form.warranty" placeholder="请选择保单">
                        <el-option
                          v-for="dict in dict.type.warranty_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="社保" prop="insurance">
                      <el-select v-model="form.insurance" placeholder="请选择社保">
                        <el-option
                          v-for="dict in dict.type.insurance_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="公积金" prop="fund">
                      <el-select v-model="form.fund" placeholder="请选择公积金">
                        <el-option
                          v-for="dict in dict.type.fund_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="工资" prop="salary">
                      <el-input v-model="form.salary" placeholder="月薪"/>
                    </el-form-item>
                  </el-col>
                  <!--            <el-col :span="8">-->
                  <!--              <el-form-item label="申请额度" prop="applyMoney">-->
                  <!--                <el-input v-model="form.applyMoney" placeholder="申请额度"/>-->
                  <!--              </el-form-item>-->
                  <!--            </el-col>-->
                  <!--            <el-col :span="8">-->
                  <!--              <el-form-item label="省份" prop="province">-->
                  <!--                <el-select v-model="form.province" placeholder="请选择省份" @clear="clearSelect('1','f')" clearable>-->
                  <!--                  <el-option-->
                  <!--                    @click.native="getChildren(p.code,'1','f')"-->
                  <!--                    v-for="p in this.provinceList"-->
                  <!--                    :key="p.code"-->
                  <!--                    :label="p.name"-->
                  <!--                    :value="p.code"-->
                  <!--                  />-->
                  <!--                </el-select>-->
                  <!--              </el-form-item>-->
                  <!--            </el-col>-->
                  <!--            <el-col :span="8">-->
                  <!--              <el-form-item label="城市" prop="city">-->
                  <!--                <el-select v-model="form.city" placeholder="请选择城市" @clear="clearSelect('2','f')" clearable>-->
                  <!--                  <el-option-->
                  <!--                    @click.native="getChildren(p.code,'2','f')"-->
                  <!--                    v-for="p in this.formCityList"-->
                  <!--                    :key="p.code"-->
                  <!--                    :label="p.name"-->
                  <!--                    :value="p.code"-->
                  <!--                  />-->
                  <!--                </el-select>-->
                  <!--              </el-form-item>-->
                  <!--            </el-col>-->
                  <!--            <el-col :span="8">-->
                  <!--              <el-form-item label="区县" prop="county">-->
                  <!--                <el-select v-model="form.county" placeholder="请选择区县" clearable>-->
                  <!--                  <el-option-->
                  <!--                    v-for="p in this.formCountyList"-->
                  <!--                    :key="p.code"-->
                  <!--                    :label="p.name"-->
                  <!--                    :value="p.code"-->
                  <!--                  />-->
                  <!--                </el-select>-->
                  <!--              </el-form-item>-->
                  <!--            </el-col>-->
                  <!--            <el-col :span="8">-->
                  <!--              <el-form-item label="客户经理" prop="manager">-->
                  <!--                <el-input v-model="form.manager" placeholder="请输入客户经理"/>-->
                  <!--              </el-form-item>-->
                  <!--            </el-col>-->

                  <el-col :span="6">
                    <el-form-item label="标签" prop="label">
                      <el-input v-model="form.label" placeholder="请输入内容"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="来源" prop="source">
                      <el-input v-model="form.source" placeholder="" disabled/>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="panel" style="margin-bottom: 58px">
              <div class="title">记录信息</div>
              <div class="content">
                <el-tabs  v-model="activityName">
                  <el-tab-pane label="跟进记录" name="first">
                    <div style="max-height: 800px;overflow-y: auto">
                      <el-timeline v-for="(item, index) in bzRecordList" :key="index">
                        <el-timeline-item :timestamp="item.createBy + '  -  '  + item.createTime" placement="top">
                          <div v-html="item.content"></div>
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="分配记录" name="second" v-if="disReturnControl == '1'">
                    <div style="max-height: 800px;overflow-y: auto">
                      <el-timeline v-for="(item, index) in pushRecordList" :key="index">
                        <el-timeline-item :timestamp="item.createTime" placement="top">
                          <div
                            v-html="item.operateDisName + '  -  ' + (item.busType == 6 ?
                            '下推' :  item.busType == 7 ?
                            '分配' : item.busType == 10 ? '下推退回' : item.busType == 13 ? '记录再审件' : '分配') +
                            '客户【' + (item.customerName?item.customerName:'') + '】' + (item.busType == 6 || item.busType ==  10 ? '' : item.busType == 13 ? '' : '给' + '【 ' + (item.disName?item.disName:'') + ' 】') +
                            (item.disReason ? ('原因：' + item.disReason) : ''   )">
                          </div>
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="退回记录" name="third" v-if="disReturnControl == '1'">
                    <div style="max-height: 800px;overflow-y: auto">
                      <el-timeline v-for="(item, index) in returnRecordList" :key="index">
                        <el-timeline-item :timestamp="item.createTime" placement="top">
                          <div
                            v-html="item.operatorName + '  -  '  + '退回' +
                            '客户【' + (item.customerName?item.customerName:'') + '】' + ' 原因：' + item.returnReason">
                          </div>
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="点评记录" name="four">
                    <div style="max-height: 800px;overflow-y: auto">
                      <el-timeline v-for="(commentRecord, index) in commentRecordList" :key="index">
                        <el-timeline-item :timestamp="commentRecord.createTime" placement="top">
                          <div
                            v-html="commentRecord.customerName + '【 '+ commentRecord.customerTel + ' 】' + '</br>'
                          + '主管【' + commentRecord.createBy + '】的点评：' + commentRecord.content">
                          </div>
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="渠道记录" name="five">
                    <div style="max-height: 800px;overflow-y: auto">
                      <el-timeline v-for="(channelCustomer, index) in channelCustomerList" :key="index">
                        <el-timeline-item :timestamp="channelCustomer.channelName + ' - ' + channelCustomer.time"
                                          placement="top">
                          <div
                            v-html="
                                     '额度：' + channelCustomer.ed + '</br>'  +
                                     '备注：' + channelCustomer.remarks + '</br>' ">
                          </div>
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </el-tab-pane>

                  <el-tab-pane label="信息变更记录" name="six">
                    <div style="max-height: 800px;overflow-y: auto">
                      <el-timeline v-for="(customerInfo, index) in customerChangeList" :key="index">
                        <el-timeline-item :timestamp="customerInfo.createBy + ' - ' + customerInfo.createTime"
                                          placement="top">
                          <div v-for="(detail, index) in customerInfo.detailList" :key="index">
                            <span>
                              {{ '【' + detail.name + '】'}} {{ '变更前：' + detail.beforeInfo }} {{ '   变更后：' + detail.afterInfo }}
                              </span>
                          </div>
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  loadParentOrg,
  addCustomer,
  updateCustomer,
  setVip,
  getRecordList,
  pushCustomerRecord, returnCustomerRecord
} from "@/api/customer/customer";
import {noListCommentRecord} from "@/api/customer/commentRecord";
import {channelCustomerList} from "@/api/channel/channelPushDis";
import {getCustomerInfoChangeList} from "@/api/customer/customerInfoChange";

export default {
  props: {
    bzRecordList: Array,  // 备注信息
    pushRecordList: Array, // 推送记录
    returnRecordList: Array, // 退回记录
    commentRecordList: Array, // 点评记录
    channelCustomerList: Array, // 渠道客户记录
    customerChangeList: Array, // 客户名称改变记录
    form: {
      type: Object,
      default: {}
    },
    currentType: {
      type: String,
      default: ''
    },
    getList: {
      type: Function,
    },
    recordList: {
      type: Function,
    },
    getCustomerChangeList: {
      type: Function
    }
  },
  dicts: ['fund_type', 'customer_status', 'sex_type', 'car_type', 'insurance_type', 'house_type', 'warranty_type',
    'level_type', 'loan_type', 'quota_type', 'is_vip', 'time_type', 'apply_time_scope', 'source_type'],
  data() {
    return {
      //分配退回控制
      disReturnControl: "",
      activityName: 'first',
      provinceList: [],
      formCityList: [],
      formCountyList: [],
      // 表单校验
      rules: {
        name: [
          {required: true, message: "姓名不能为空", trigger: "blur"}
        ],
        tel: [
          {required: true, message: "手机号码不能为空", trigger: "blur"}
          // {
          //   required: true,
          //   pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          //   message: "请输入正确格式的手机号码",
          //   trigger: "blur"
          // }
        ],
        level: [
          {
            required: true,
            message: "请选择星级",
            trigger: "blur"
          }
        ],
      }
    };
  },
  methods: {
    btnSubmit() { //发送事件  数据
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          this.form.currentType = this.currentType;
          if (this.form.id != null) {
            updateCustomer(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              //this.open = false;
              if (this.getList) {
                this.getList();
              }
              // 获取右侧信息
              if (this.recordList) {
                this.recordList(this.form.id);
              }
              if (this.getCustomerChangeList) {
                this.getCustomerChangeList(this.form.id);
              }
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addCustomer(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              //this.open = false;
              if (this.getList) {
                this.getList();
              }
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
          this.form.bz = "";
        }
      })
    },
    handleVipChange(id, type) {
      setVip(id, type).then(resp => {
        this.$modal.msgSuccess("设置成功");
        if (this.getList) {
          this.getList();
        }
        // 获取右侧信息
        if (this.recordList) {
          this.recordList(this.form.id);
        }
      })
    },
    loadPOrg(parentId, level) {
      loadParentOrg(parentId).then(response => {
        if (level == '0') {
          this.provinceList = response.data
        } else if (level == '1') {
          this.formCityList = response.data
        } else {
          this.formCountyList = response.data
        }
      })
    },
    getChildren(parentId, level, type) {
      this.clearSelect(level, type)
      this.loadPOrg(parentId, level, type)
    },
    clearSelect(level) {
      if (level == '1') {
        this.formCityList = []
        this.form.city = ''
      }
      this.form.county = ''
      this.formCountyList = []
    },
    initRecordList(id) {
      getRecordList(id).then(res => {
        this.bzRecordList = res.data;
      });
    },
    recordChange(activeName) {
      const tableName = activeName.name;
      const id = this.customerId;
      if (tableName == 'first') {
        getRecordList(id).then(res => {
          this.bzRecordList = res.data;
        });
      } else if (tableName == 'second') {
        pushCustomerRecord(id).then(res => {
          this.pushRecordList = res.data;
        })
      }  else if (tableName == 'third') {
        returnCustomerRecord(id).then(res => {
          this.returnRecordList = res.data;
        })
      }  else if (tableName == 'four') {
        const queryWrapper = {
          customerId: id
        }
        noListCommentRecord(queryWrapper).then(res => {
          this.commentRecordList = res.data;
        })
      } else if (tableName == 'five') {
        const queryWrapper = {
          id: id
        };
        channelCustomerList(queryWrapper).then(res => {
          this.channelCustomerList = res.data;
        })
      }  else if (tableName == 'six') {
        const queryWrapper = {
          customerId: id,
          type: 'customerInfoChange'
        };
        getCustomerInfoChangeList(queryWrapper).then(res => {
          this.customerChangeList = res.data;
        })
      }
    },
  },
  created() {
    //this.customerId = this.form.id;
    //this.initRecordList(this.customerId);
    this.disReturnControl = this.$store.state.user.user.disReturnControl
    console.log("打印信息： ", this.disReturnControl);
    this.loadPOrg('0', 0)
  },
  mounted() {
    if (this.form.province) {
      this.loadPOrg(this.form.province, 1);
    }
    if (this.form.city) {
      this.loadPOrg(this.form.city, 2);
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-drawer__header {
  margin-bottom: 2px;
}

.main-panel {
  margin: 0px;
  padding: 5px;

  .custerMobile > input {
    font-size: 20px !important;
    color: red !important;
  }

  .panel {
    border: solid 1px #cccccc;
    min-height: 100px;
    border-radius: 2px;
    margin-top: 10px;

    .title {
      font-weight: bold;
      margin-top: 10px;
      margin-left: 5px;
      padding-left: 5px;
      color: #333333;
      border-left: 5px solid #4F9EFF;
    }

    .content {
      padding: 5px;

      .goods-logo {
        width: 45px;
        height: 45px;
        border: solid 1px #cccccc;
      }

      .spec-item {
        color: #666666;
        background: #ffffff;
        border: #666666 solid 1px;
        border-radius: 20px;
        padding: 2px 8px 2px 8px;
        margin-right: 5px;
      }

      .row {
        min-height: 40px;
        verticle-align: middle;
        display: flex;
        line-height: 40px;

        .payed-status {
          color: #52c41a;
          background: #f6ffed;
          border: #b7eb8f solid 1px;
          border-radius: 20px;
          padding: 5px 8px 2px 8px;
          font-size: 90%;
        }

        .normal-status {
          color: #666666;
          background: #ffffff;
          border: #666666 solid 1px;
          border-radius: 20px;
          padding: 5px 8px 2px 8px;
          font-size: 90%;
        }
      }

      .head {
        color: rgb(164, 164, 164);
        min-width: 120px;
        text-align: right;
        display: block;
        float: left;
      }

      .control-text {
        display: block;
        background: #f5f5f5;
        border-radius: 10px;
        margin-left: 120px;
        margin-top: 5px;
        line-height: 22px;
        padding: 5px 10px 5px 10px;
      }
    }
  }
}
</style>
